<template>
  <div class="container">
    <el-card>
      <div v-if="$route.query.id" class="header-title">学科管理 <i class="el-icon-arrow-right"></i> {{ $route.query.name }} <i class="el-icon-arrow-right"></i> 目录管理</div>
      <div class="content">
        <el-row type="flex" justify="space-between" align="middle">
          <el-col :span="20">
            <el-row type="flex">
              <el-col :span="13">
                <span>目录名称</span>
                <el-input v-model="directoryPage.directoryName" style="width: 240px; margin: 0 10px"></el-input>
              </el-col>
              <el-col>
                <span>状态</span>
                <el-select v-model="directoryPage.state" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
                <el-button @click="clear">清除</el-button>
                <el-button type="primary" @click="getDirectoryLit">搜索</el-button>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <el-button v-if="$route.query.id" type="text" icon="el-icon-back" @click="$router.back()">返回学科</el-button>
              <el-button type="success" icon="el-icon-edit" @click="isShowAdd=true">新增目录</el-button>
            </el-row>
          </el-col>
        </el-row>
        <el-alert show-icon :title="`数据一共${total}条`" type="info" :closable="false" style="margin: 10px 0"> </el-alert>
        <sbjTables :tableCont="directoryTableCont" :tableData="directoryList" @change="changeState" @del="delDirectory" @edit="editDirectory"></sbjTables>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="directoryPage.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
        <directorysAdd v-if="isShowAdd" :directoryCont="editDirectoryCont" :dialogVisible.sync="isShowAdd" @add="addDirectory" @edit="updateDirectory" @close="close"></directorysAdd>
      </div>
    </el-card>
  </div>
</template>

<script>
import sbjTables from '../components/subjects-table.vue'
import directorysAdd from '../components/directorys-add.vue'
import { list, changeState, remove, add, update } from '@/api/hmmm/directorys'
export default {
  components: {
    sbjTables,
    directorysAdd
  },
  data () {
    return {
      directoryPage: {
        page: 1,
        pagesize: 10,
        subjectID: this.$route.query.id,
        state: null,
        directoryName: ''
      },
      directoryList: [],
      currentPage: 1,
      total: 0,
      options: [
        { label: '禁用', value: 0 },
        { label: '启用', value: 1 }
      ],
      directoryTableCont: [
        { id: 1, lable: '所属学科', prop: 'subjectName' },
        { id: 2, lable: '目录名称', prop: 'directoryName' },
        { id: 3, lable: '创建者', prop: 'username' },
        { id: 4, lable: '创建日期', prop: 'addDate' },
        { id: 5, lable: '面试题数量', prop: 'totals' },
        { id: 6, lable: '状态', prop: 'state' }
      ],
      isShowAdd: false,
      editDirectoryCont: {}
    }
  },
  created () {
    this.getDirectoryLit()
  },
  methods: {
    // 渲染页面
    async getDirectoryLit () {
      const { data } = await list(this.directoryPage)
      data.items.map((item) => {
        item.state = item.state === 0 ? '已启用' : '已禁用'
        item.addDate = this.dayjs(item.addDate).format('YYYY-MM-DD HH:mm:ss')
      })
      this.directoryList = data.items
      this.total = data.counts
    },
    // 清除
    clear () {
      this.directoryPage.directoryName = ''
      this.directoryPage.state = null
    },
    // 改变分页器每页条数
    handleSizeChange (val) {
      this.directoryPage.pagesize = val
      this.getDirectoryLit()
    },
    // 分页器改变页码
    handleCurrentChange (val) {
      this.directoryPage.page = val
      this.getDirectoryLit()
    },
    // 改变状态
    async changeState (val) {
      await changeState({ id: val.id, state: val.state === '已禁用' ? 0 : 1 })
      this.$message.success('操作成功')
      this.getDirectoryLit()
    },
    // 删除
    async delDirectory (val) {
      if ((this.total - 1) % this.directoryPage.pagesize === 0 && this.directoryPage.page > 1) {
        this.directoryPage.page -= 1
      }
      await remove({ id: val.id })
      this.getDirectoryLit()
    },
    // 添加
    async addDirectory (val) {
      await add(val)
      this.$message.success('目录添加成功')
      this.getDirectoryLit()
    },
    // 编辑
    editDirectory (val) {
      this.isShowAdd = true
      this.editDirectoryCont = { ...val }
    },
    async updateDirectory (val) {
      await update(val)
      this.isShowAdd = false
      this.getDirectoryLit()
      this.$message.success('目录修改成功')
    },
    close () {
      this.isShowAdd = false
      this.editDirectoryCont = {
        subjectID: '',
        directoryName: ''
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .el-card {
    margin: 10px;
    .el-card__body {
      padding: 0;
      .header-title {
        height: 50px;
        line-height: 50px;
        width: 100%;
        border-bottom: 1px solid #ccc;
        padding-left: 20px;
        margin-bottom: 20px;
      }
      .content {
        padding: 0 20px 40px;
        position: relative;
      }
      span {
        font-size: 16px;
        color: #606266;
        font-weight: bold;
      }
      .el-select--medium {
        margin: 0 10px;
      }
      .el-pagination {
        margin-top: 10px;
        position: absolute;
        bottom: 0;
        right: 30px;
      }
    }
  }
}
</style>
